<script setup>
import { useEventListener, useMousePressed } from '@vueuse/core'

const props = defineProps({
  task: Object,
  left: Number,
  width: Number,
  disabled: {
    type: Boolean,
    default: true,
  },
})

const openDialog = inject('openDialog')
//
// const emit = defineEmits(['update:width', 'update:left'])
//
// const mouseX = inject('mouseX')
//
// const leftPressed = ref()
//
// const rightPressed = ref()
//
// let unwatch = null
//
// watch(leftPressed, (v) => {
//   if (v) {
//     unwatch = watch(mouseX, (newX, oldX) => {
//       emit('update:left', props.left + (newX - oldX))
//     })
//   } else {
//     unwatch()
//   }
// })
//
// watch(rightPressed, (v) => {
//   if (v) {
//     unwatch = watch(mouseX, (newX, oldX) => {
//       emit('update:width', props.width + (newX - oldX))
//     })
//   } else {
//     unwatch()
//   }
// })
//
// useEventListener(document, 'mouseup', () => {
//   if (leftPressed.value) {
//     leftPressed.value = false
//   }
// })
//
// useEventListener(document, 'mouseup', () => {
//   if (rightPressed.value) {
//     rightPressed.value = false
//   }
// })
</script>

<template>
  <div
    class="task-line"
    :style="{ left: `${props.left}px`, width: `${props.width}px` }"
    @click="!props.disabled && props.currentStatus === 1 && openDialog(props.task)">
    <el-tooltip class="box-item" effect="dark" :content="'#' + task.taskCode" placement="top-start">
      <span>#{{ props.task.taskCode }}</span>
    </el-tooltip>

    <!--<div style="position: relative; height: 100%">-->
    <!--  <div class="left-slider" @mousedown="leftPressed = true"></div>-->
    <!--  <div class="right-slider" @mousedown="rightPressed = true"></div>-->
    <!--</div>-->
  </div>
</template>

<style scoped lang="scss">
.task-line {
  cursor: pointer;
  position: absolute;
  height: 16px;
  background-color: var(--elp-color-primary-light-5);
  text-align: center;
  color: #ffffff;
  &:hover {
    background-color: var(--elp-color-primary-light-3);
  }
  //&:hover {
  //  .left-slider,
  //  .right-slider {
  //    background-color: var(--elp-color-primary-light-3);
  //  }
  //}
  //.left-slider,
  //.right-slider {
  //  cursor: e-resize;
  //  position: absolute;
  //  width: 10px;
  //  height: 100%;
  //}
  //.left-slider {
  //  left: 0;
  //}
  //.right-slider {
  //  right: 0;
  //}
}
</style>
